import React from 'react';
import {SEND_SMS_CODE,CHANGE_PHONE_NUMBER} from '../../constants/userTypes';
import {getItem} from '../../utils';

/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';
/**
 * 加载样式或图片文件
 * */
import './sass/change.scss';
import iconPhone from '../../containers/_common_img/login/phone.png';
import iconSMS from '../../containers/_common_img/login/psw.png';


class ChangePhone extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    constructor(props) {
        super(props);
        this.handlePhoneInput = this.handlePhoneInput.bind(this);
        this.handleCodeInput = this.handleCodeInput.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.sendSmsCode = this.sendSmsCode.bind(this);
        this.state = {
            phone: '',
            smsCode: '',
            sendFlag: false,
            leftSeconds: 60
        };
    }

    handlePhoneInput(e) {
        this.setState({phone: e.target.value});
    }

    handleCodeInput(e) {
        this.setState({smsCode: e.target.value});
    }

    countdown() {
        this.timer = setInterval(() => {
            this.setState({
                leftSeconds: this.state.leftSeconds - 1
            });
            if (this.state.leftSeconds <= 0) {
                clearInterval(this.timer);
                this.setState({
                    sendFlag: false
                });
            }
        }, 1000);
    }

    sendSmsCode() {
        const { actions } = this.props;
        let phone = this.state.phone,
            reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
        if (phone === "") {
            alert('请输入手机号');
            return false;
        } else if (!reg.test(phone)) {
            alert('请输入正确的手机号');
            return false;
        }
        actions.sendSmsCode({type: 103, phone: phone}).then(res => {
            if(res.type === SEND_SMS_CODE) {
                if(res.data.code == 20000){
                    if (!this.state.sendFlag) {
                        this.setState({
                            sendFlag: true
                        });
                        this.countdown();
                    }
                }else{
                    alert(res.data.message);
                }

            }
        });
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }

    handleSubmit(){
        const {actions} = this.props;
        let data={
            captcha: this.state.smsCode,
            phone: this.state.phone,
            openid: getItem('openid')
        };
        actions.changePhoneNumber(data).then(res =>{
            if(res.type === CHANGE_PHONE_NUMBER){
                if(res.data.code == 20000){
                    this.context.router.goBack();
                }else{
                    alert(res.data.message)
                }
            }
        });
    }

    render() {
        const {actions, user, home} = this.props;
        let submitFlag = this.state.phone.length && this.state.smsCode.length;
        return (
            <MainSection className="change" title="更换手机">
                <div className="input-wrap">
                    <img className="icon-phone" src={iconPhone} alt=""/>
                    <input type="number" placeholder="手机号" onChange={this.handlePhoneInput} maxLength="11"/>
                    <span className={'sms-code ' + (this.state.sendFlag ? 'disabled' : '' )} onClick={ this.sendSmsCode }>
                        { this.state.sendFlag ? this.state.leftSeconds + 's后重发' : '获取验证码' }
                    </span>
                </div>
                <div className="input-wrap">
                    <img className="icon-phone" src={iconSMS} alt=""/>

                    <input type="text" placeholder="短息验证码" onChange={this.handleCodeInput} maxLength="6"/>
                </div>
                <button className={"confirm-btn " + (submitFlag ? "" : "disabled")}
                        onClick={this.handleSubmit}>确定</button>
            </MainSection>
        );
    }
}

export default ChangePhone;